<template>
    <div class="article-edit">
        <el-card class="!border-none" shadow="never">
            <el-page-header :content="$route.meta.title" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" shadow="never">
            <el-form  class="ls-form" label-width="140px">
                <div class="xl:flex flex-row" style="flex-wrap: wrap;">
                    <el-form-item :label="item.name" v-for="(item, index) in columnArr.column" :key="index">
                        <!-- :rules="rules" :prop="item.column_name" -->
                            <div v-if="item.column_name == 'img'" class="w-80">
                                <el-image style="width: 100px; height: 100px;margin-right: 10px;" v-for="image in fileList"
                                    :key="c" :src="image" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                    :preview-src-list="[image]" :initial-index="4" fit="cover" />
                            </div>
                            <div class="w-80" v-else>
                                <div v-if="datePicker.indexOf(item.column_name) != -1">
                                    <div>{{ dateComputed(formData[item.column_name]) }}</div>
                                </div>
                                <div v-else >
                                    <div>{{ formData[item.column_name] }}</div>
                                </div>
                            </div>

                    </el-form-item>
                </div>
            </el-form>
        </el-card>
        <footer-btns>
            <el-button type="primary" @click="onClose">关闭</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup name="articleListsEdit">
import type { FormInstance } from 'element-plus'

import { getColumn, getDict } from '@/api/perms/role'
import {inforDetail } from '@/api/information/information'

import { adminAll } from '@/api/perms/admin'
import { deptAll } from '@/api/org/department'

import { useDictOptions } from '@/hooks/useDictOptions'
import useMultipleTabs from '@/hooks/useMultipleTabs'
import dayjs  from 'dayjs'
import config from '@/config'
import useAppStore from '@/stores/modules/app'
import useUserStore from '@/stores/modules/user'
import feedback from '@/utils/feedback'

// import RelationsAdd from '../components/relations-add.vue'
const userStore = useUserStore()
const appStore = useAppStore()
const action = ref(`${config.baseUrl}${config.urlPrefix}/upload/image`)
// console.log(action.value, "action")
const headers = computed(() => ({
    token: userStore.token,
    version: appStore.config.version
}))
const dateComputed = computed(()=>(timestamp:any)=>{
    if(timestamp == 0){
        return "";
    }
    timestamp = timestamp * 1000;
    console.log(timestamp);
	return dayjs(timestamp).format('YYYY-MM-DD');
})
const route = useRoute()
const router = useRouter()
const formData = reactive({})
const fileList = reactive([]);
//日期
let datePicker = [
    'first_commit_time',
    'update_paper_time',
    'commit_time'
];
//枚举值
let enumerate = [
    'is_settlement',
    'is_degree',
    'hosting',
    'status',
    'dept_status',
    'charge_of_group',
    'belong_dept',
    'have_title',
    'pre_material_state',
    'is_duplicate_checking',
];
//下拉选择
let select = [
    'admin_id',
    'principal',
    'receiver_id',
    'after_sale_id',
];

let typeNumer = [
    'total_amount',
    'initial_payment',
    'balance_payment',
    'paper_number',
];
const columnArr = reactive({
    "column": []
})
const { removeTab } = useMultipleTabs()
const dictOptions = reactive({
    options: {},
})
const admin = reactive({
    options: [],
});
const deptOptions = reactive({
    options: [],
});


const formRef = shallowRef<FormInstance>()

const getDetail = async () => {
    let columnAuth = await getColumn()
    let data = await inforDetail({
        id: route.query.id
    });
    let dict = await getDict();
    admin.options = await adminAll();
    let dept = await deptAll();
    deptOptions.options = dept[0]['children'];

    //整理枚举类型字典数组
    dict.forEach(element => {
        dictOptions.options[element.type] = element;
    })
    console.log(dictOptions);
    columnAuth.column.forEach(element => {
        if (element.radio == 1 || element.radio == 3) {
            if(data[element.column_name] === 0)
            {
                formData[element.column_name] = "";
            }
            else if(enumerate.indexOf(element.column_name)!= -1)
            {
                dictOptions.options[element.column_name]['options'].map(element1 => {
                    if (element1.value == data[element.column_name]) {
                        formData[element.column_name] = element1.name;
                    }
                });
            }
            else if(select.indexOf(element.column_name)!= -1)
            {
                admin.options.map(element1 => {
                    if (element1.id == data[element.column_name]) {
                        formData[element.column_name] = element1.name;
                    }
                });
            }
            else if(element.column_name == 'dept_id')
            {
                deptOptions.options.map(element1 => {
                    if (element1.id == data[element.column_name]) {
                        formData[element.column_name] = element1.name;
                    }
                });
            }
            else
            {
                formData[element.column_name] = data[element.column_name];
            }
            columnArr.column.push(element);
        }
    });
    data['img'].map(element=>{
        fileList.push(element.url);
    })
    console.log(fileList,'yyyyyyyyyyyyyyyyyyyy');
}

const onClose = async () => {
    removeTab()
    router.back()
}
getDetail()
</script>
